$(document).ready(function() {
	Invitesq.ticketTemplate = function() {
		return '' + 
		'<div><input type="text" placeholder="Ticket category" id="ticket-category"/>' + 
		'<br/>' + '<input type="text" placeholder="Ticket price" id="ticket-price" />' + 
		'<br/>' + 
		'<button id="create-ticket-btn" class="btn btn-primary">Create Ticket</button>'
	};
	
	Invitesq.ticketOneTemplate = function() {
		return '' + 
		'<h4 id="ticket-cat" class="span4" style="line-height:28px;"><%= category %>:</h4>' +
		'<p id="ticket-price" class="span4" style="line-height:28px;">$<%= price %></p>' +
		'<a id="ticket-buy" class="span4 btn" href="#">Buy</a>'
		;	
	};
	
	Invitesq.ticketBoxTemplate = function() {
		return '' +
		'<h2>Tickets </h2>' +
		'<div class="box grey" id="ticket-collection"></div>' 
		;
	};

	Invitesq.TicketModel = Backbone.Model.extend({});
	Invitesq.TicketCollection = Backbone.Collection.extend({
		model: Invitesq.TicketModel
	});
	
	Invitesq.ticketCollection = new Invitesq.TicketCollection();
	
	// View to create ticket 
	Invitesq.TicketCreateView = Backbone.View.extend({
		tagName: 'div',
		
		className: 'row-fluid',
		
		template: _.template(Invitesq.ticketTemplate()),
		
		events: {
			'click #create-ticket-btn': 'createTicket'
		},
		
		render: function() {
			$(this.el).html(this.template({}));
			return this;			
		},
		
		createTicket: function() {
			console.log('createTicket');
			ticket = {
				category: this.$('#ticket-category').val(),
				price: this.$('#ticket-price').val(),
				event_id: Invitesq.eventId
			};
			
			$.post('/api/ticket/create/', ticket, function(data){
				$.fancybox.close();
				// Ticket model
				ticket = JSON.parse(data);
				// Add to collection to trigger change 
				Invitesq.ticketCollection.add(ticket);
			});
		}		
	});
	
	// View to display a single ticket on Event Page 
	Invitesq.TicketView = Backbone.View.extend({ 
		tagName: 'div',
		
		className: 'ticket-item',
	
		template: _.template(Invitesq.ticketOneTemplate()),
		
		initialize: function(){
			_.bindAll(this, 'render');
		},
		
		render: function() {
			$(this.el).html(this.template(this.model.toJSON()));
			return this;			
		},
	});
	
	// View to display the ticket box on Event Page 
	Invitesq.TicketCollectionView = Backbone.View.extend({ 
		tagName: 'div',
		
		className: 'span12',
	
		template: _.template(Invitesq.ticketBoxTemplate()),
		
		initialize: function(){
			_.bindAll(this, 'render', 'addTicket');
			
			Invitesq.ticketCollection.on("add", this.addTicket, this);
			
			this.render();
		},
		
		render: function() {
			$(this.el).html(this.template());
			console.log("render ticket box");
			// Add photo into this collection
			var $this = this;
			Invitesq.ticketCollection.each(function(photo) {
				$this.addTicket(photo);
			});
			
			return this;			
		},
		
		// Add one ticket type
		addTicket: function(ticket) {
			console.log("add ticket" + ticket.toJSON());
			var ticketView = new Invitesq.TicketView({model: ticket});
			this.$('#ticket-collection').append(ticketView.render().el);
		},	
		
		// Remove one ticket type
		removeTicket: function(ticket) {
			console.log("remove ticket" + JSON.stringify(ticket));
		},
	
	});
	
});
